<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷</title>
</head>
<body>
<div id="app">
    <button @click="sub">提交</button>
    <!--item为顶级遍历对象 item11为第一层titleList，item12为第一层contentList遍历对象 以此类推-->
    <li v-for="item in dataList" :key="item.id" v-cloak>
        <!--第一层标题-->
        <p v-text="item.qsTitleEntity.titleName"></p>
        <ul v-if="item.qsTitleEntity.isNoChild=='1'" >
            <li v-for="item11 in item.titleList" :key="item11.id">
                <!--第二层标题-->
                <p v-text="item11.qsTitleEntity.titleName"></p>
                <ul v-if="item11.qsTitleEntity.isNoChild=='1'" >
                    <li v-for="item21 in item11.titleList" :key="item21.id">
                        <!--第三层标题-->
                        <!--标题typeCode 1 普通 2 需要动态记分到标题后面-->
                        <p v-if="item21.qsTitleEntity.typeCode=='1'"><span v-text="item21.qsTitleEntity.titleName"></span></p>
                        <!--<p v-if="item21.qsTitleEntity.typeCode=='2'"><span v-text="item21.qsTitleEntity.titleName"></span>-&#45;&#45;</p>-->
                        <ul v-if="item21.qsTitleEntity.isNoChild=='1'" >
                            <li v-for="item31 in item21.titleList" :key="item31.id">
                                <p v-text="item31.qsTitleEntity.titleName"></p>
                            </li>
                        </ul>
                        <ul v-if="item21.qsTitleEntity.isNoChild=='0'" >
                            <li v-for="item32 in item21.contentList" :key="item32.id">
                                <!--type 1单选 2多选 3注释 4填空 10问卷题目类型特殊(if逻辑判断) 11注明-->
                                <lable v-if="item32.type=='1'">
                                    <div>
                                        <input :name="getRadioType(item32.type)" type="radio" >{{item32.value}}
                                    </div>
                                </lable>
                                <lable v-if="item32.type=='2'">
                                        <input name="aa" type="checkbox">{{item32.value}} &nbsp;&nbsp;&nbsp;{{item32.mark!='0'?item32.mark+'分':''}}
                                </lable>
                                <lable v-if="item32.type=='3'">
                                    {{item32.value}}
                                </lable>
                                <lable v-if="item32.type=='4'">
                                    <div @click="prompt(item32)">{{item32.value}}</div>
                                </lable>
                                <lable v-if="item32.type=='10'" :name="getRadioType(item32.type)">
                                    {{item32.value}}
                                </lable>
                                <lable v-if="item32.type=='11'">
                                    (注明：  &nbsp;&nbsp; )(对上面问题)
                                    <div hidden="hidden"></div>
                                </lable>

                            </li>

                        </ul>
                    </li>
                </ul>
                <ul v-if="item11.qsTitleEntity.isNoChild=='0'" :name="getRadioType(10)">
                    <li v-for="(item22,index) in item11.contentList" :key="item22.id" v-cloak>
                        <!--type 1单选 2多选 3注释 4填空 10问卷题目类型特殊(if逻辑判断) 11注明-->
                        <lable v-if="item22.type=='1'">
                            <div>
                                <input :name="getRadioType(item22.type)" type="radio" >{{item22.value}}
                            </div>
                        </lable>
                        <lable v-if="item22.type=='2'">
                                <input  type="checkbox">{{item22.value}} &nbsp;&nbsp;&nbsp;{{item22.mark!='0'?item22.mark+'分':''}}
                        </lable>
                        <lable v-if="item22.type=='3'">
                            {{item22.value}}
                        </lable>
                        <lable v-if="item22.type=='4'">
                            <div @click="prompt(item22)">{{item22.value}}</div>
                        </lable>
                        <lable v-if="item22.type=='10'" :name="getRadioType(item22.type)" >
                            {{item22.value}}
                        </lable>
                        <lable v-if="item22.type=='11'">
                            (注明：  &nbsp;&nbsp; )(对上面问题)
                            <div hidden="hidden"></div>
                        </lable>
                    </li>
                </ul>
            </li>
        </ul>
        <ul v-if="item.qsTitleEntity.isNoChild=='0'" :name="getRadioType(10)">
            <li v-for="item12 in item.contentList" :key="item12.id">
                <!--type 1单选 2多选 3注释 4填空 10问卷题目类型特殊(if逻辑判断) 11注明-->
                <lable v-if="item12.type=='1'">
                    <div>
                        <input :name="getRadioType(item12.type)" type="radio" >{{item12.value}}
                    </div>
                </lable>
                <lable v-if="item12.type=='2'">
                        <input  type="checkbox">{{item12.value}} &nbsp;&nbsp;&nbsp;{{item12.mark!='0'?item12.mark+'分':''}}
                </lable>
                <lable v-if="item12.type=='3'">
                    {{item12.value}}
                </lable>
                <lable v-if="item12.type=='4'">
                    <div @click="prompt(item12)">{{item12.value}}</div>
                </lable>
                <lable v-if="item12.type=='10'" :name="getRadioType(item12.type)" >
                    {{item12.value}}
                </lable>
                <lable v-if="item12.type=='11'">
                    (注明：  &nbsp;&nbsp; )(对上面问题)
                    <div hidden="hidden"></div>
                </lable>
            </li>
        </ul>
    </li>

</div>
<script src="../../static/lib/jquery.min.js"></script>
<script src="../../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../../static/lib/vue.min.js"></script>

<script>
    layui.use(['layer'], function(){
        var layer = layui.layer;
    });
    var num=1;
    var VM = new Vue({
        el:"#app",
        data:{
            dataList:[],
            radioType:'1',
            resMap:{},
        },
        created:function(){
            this.init();
        },
        methods:{
            /*初始化界面*/
            init:function(){
                var _this = this;
                $.ajax({
                    type: "post",
                    url: "../../qsWeb/info.do",
                    dataType: "json",
                    success: function(data){
                        if(data.msg=="success"){
                            _this.dataList = data.result.titleList;
                        }else{
                            layer.alert(data.msg, {icon: 1})
                        }
                    }
                });
            },
            /*提交数据*/
            sub:function () {
                var _this = this;

                var json = _this.resMap;
                var jsonStr = JSON.stringify(json);

                console.log(jsonStr)
                $.ajax({
                    type: "post",
                    url: "../../qsWeb/save.do",
                    data:{jsonStr:jsonStr},
                    dataType: "json",
                    success: function(data){
                        if(data.msg=="success"){
                            layer.msg("保存成功！", {icon: 1})
                        }else{
                            layer.msg(data.msg, {icon: 1})
                        }
                    }
                });
            },
           /* 弹出框弹出输入界面*/
            prompt:function(obj){
                var _this = this;
                //prompt层
                layer.prompt({title: '输入结果，并确认'}, function(text, index){
                    var data = {contentId:obj.id,questionId:"",type:obj.type,value:text};
                    _this.resMap[obj.id]=data;

                    layer.close(index);
                });
            },
            /*动态给单选radio分类 num为js全局变量*/
            getRadioType:function (radioType) {
                console.log(radioType)
                if(radioType=='10'){
                    num++;
                    return num;
                }
                return num;

            },
            <!--type 1单选 2多选 3注释 4填空 10问卷题目类型特殊(if逻辑判断) 11注明-->
            /*获取节点类型，返回类型字符串*/
            getType:function (obj) {
                if(obj.type=='1') {
                    return 'radio';
                } else if(obj.type=='2') {
                    return 'checkbox';
                } else if(obj.type=='3') {
                    return 'text';
                } else if(obj.type=='4') {
                    return 'text';
                } else if(obj.type=='10') {
                    return 'text';
                } else if(obj.type=='11') {
                    return 'text';
                }
            },
            /*获取节点对应的值*/
            getText:function (obj) {
                if(obj.type=='1') {
                    return 'radio';
                } else if(obj.type=='2') {
                    return obj.value!='其他'?(obj.value+'  '+obj.mark!='0'?obj.mark+'分':''):obj.value;
                } else if(obj.type=='3') {
                    return 'text';
                } else if(obj.type=='4') {
                    return 'text';
                } else if(obj.type=='10') {
                    return 'text';
                } else if(obj.type=='11') {
                    return '(注明：     )(对上面问题)';
                }
            },
        }
    });
</script>
</body>
</html>